{php}	add_js_plugin('nivoSlider'); {/php}
{config_load file="lang/$language/lang_$language.conf" section="categorie_listing"}

<link rel="stylesheet" href="/templates/itdotmedia/css/nivo-slider.css" type="text/css">
<link rel="stylesheet" href="/templates/itdotmedia/css/nivo-default.css" type="text/css">
    
<script type="text/javascript">
  var nivo_maincategory = new Array();
{foreach from=$module_content item=item name=cat_items}
    nivo_maincategory[{$smarty.foreach.cat_items.index}] = 
      {ldelim}'href':'{$item.CATEGORIES_LINK}', 'descr': ''{rdelim};
{/foreach}

{literal}  
  $(document).ready(function() {
    var slider = new $('#slider').nivoSlider({
      effect: 'sliceDown',                                                         
      startSlide: 0,
      slices: 15, 
      animSpeed: 500, 
      pauseTime: 500000000,  
      useNavTitles:true,
      afterLoad: function() {
        $('#slider').append('<div class="nivo-captionbutton button-itdotmedia">weitere Informationen</div>'); 
        $('div.nivo_maincategory div.nivo-captionbutton').click(function() {
          var rel = slider.data('nivo:vars').currentSlide;
          var href = nivo_maincategory[rel].href;
          window.location.href = href;
        });
        /*$('div.nivo_maincategory div.nivo-controlNav a').click(function(){
          var rel = $(this).attr('rel');
          var href = (nivo_maincategory[rel].href);
          window.location.href = href;
        });*/                           
      }
    });
  });
{/literal}  
</script>
   <div id="cat-slider-wrapper" class="shadow">
   {if $CATEGORIES_HEADING_TITLE|default:$CATEGORIES_NAME}<h1>{$CATEGORIES_HEADING_TITLE}</h1>{/if} 
    <div id="slider_wrapper" class="nivo_maincategory {$linkurl}">
      <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
        {foreach from=$module_content item=item}
          <a href="{$item.CATEGORIES_LINK}">
            <img src="/{$item.CATEGORIES_IMAGE_EXT.SLIDER}" alt="" nav="{$item.CATEGORIES_NAME}" title="{$item.CATEGORIES_DESCRIPTION}"  />
          </a>
        {/foreach}
        </div>
       
      </div>
    </div>
    {if $CATEGORIES_DESCRIPTION !=''}
		{$CATEGORIES_DESCRIPTION}<br /><br />
	{/if}
  </div>
  